Chart for WPF/Silverlight
例:基本的な折れ線グラフを設定する
製品の概要 > はじめに > XAML クイックリファレンス > 例:基本的な折れ線グラフを設定する

次の XAML は、C1Chart コントロールを宣言し、グラフの基本的な外観を定義するには、ChartType プロパティ、Theme プロパティおよび Palette プロパティを設定する方法を示します。XAML コードをタグ内<Grid>…</Grid>に追加します。以下のグラフは、次の XAML コードを使用して生成されます。

XAML
コードのコピー
<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:c1="http://schemas.componentone.com/xaml/c1chart"
  Title="Window1" Height="300" Width="348" >
  <Grid>
             <!--C1Chart コントロールを宣言します。
      グラフの基本的な外観を定義するには、
      ChartType プロパティ、Theme プロパティおよび Palette プロパティを設定します。-->
    <c1:C1Chart
      Name="C1Chart1"
      ChartType="Line"
      Foreground="#a0000000"
      Background="#e0ffffff"
      Theme ="Vista"
      Palette ="Aspect" >
           <!-- グラフの軸を含むグラフビューを定義します。-->
      <c1:C1Chart.View>
        <c1:ChartView>
                 <!-- X 軸を定義します。 (タイトル、 グリッド) -->
          <c1:ChartView.AxisX>
            <c1:Axis
              Title="年"
              MajorGridStroke="Transparent"/>
          </c1:ChartView.AxisX>
          <!-- Y 軸を定義します。 (タイトル、グリッド、注釈書式) -->
          <c1:ChartView.AxisY>
            <c1:Axis
              Title="四半期売上高(単位:\10,00,000)"
              MajorGridStroke="#40000000"
              AnnoFormat="n0" />
          </c1:ChartView.AxisY>
        </c1:ChartView>
      </c1:C1Chart.View>
          <!-- データ系列を含むグラフデータを定義します。-->
      <c1:C1Chart.Data>
        <c1:ChartData>
                <!-- ItemNames は、X 軸上のラベルを定義します。 -->
          <c1:ChartData.ItemNames>P1 P2 P3 P4 P5</c1:ChartData.ItemNames>
                 <!-- 各データ系列は、ラベル(凡例で表示される)
             および系列のデータを指定します。-->
          <c1:DataSeries Label="Series 1" RenderMode="Default" Values="20 22 19 24 25" />
          <c1:DataSeries Label="Series 2" RenderMode="Default" Values="8 12 10 12 15" />
        </c1:ChartData>
      </c1:C1Chart.Data>
      <!-- 系列とそのスタイルを含む凡例を表示するには、
        グラフの右側にドッキングされている ChartLegend を追加します。-->
      <c1:C1ChartLegend DockPanel.Dock="Right" />
    </c1:C1Chart>
  </Grid>
</Window>
関連トピック